<template>
	<view>
		<NavBar :isBack='true' :isRbtn='false' :title='title' @onRight="handRight"></NavBar>
		<image src="../../static/index/earningBj.png" class="earningBj"></image>
		<view class="container">
			<view class="withdrawBox">
				<image src="../../static/index/withdrawBj.png" class="withdrawBj"></image>
				<view class="withdrawContent">
					<view class="flex withdrawText">
						<view class="flex center">
							<view>待提现(元)</view>
							<image src="../../static/index/look.png" class="look"></image>
						</view>
						<view class="flex center">
							<image src="../../static/index/safety.png" class="safety"></image>
							<view>安全保障中</view>
						</view>
					</view>
					<view class="flex center"><text style="font-size: 48rpx;">{{awaitPoint}}</text>积分<text
							style=" color: #ff4935;">≈{{awaitMoney}}元</text>
					</view>
					<view class="flex earningsBox">
						<view>
							<view>今日收益（积分）</view>
							<view>{{todayPoint}}</view>
						</view>
						<view>
							<view>累计收益</view>
							<view>{{tookIncome}}</view>
						</view>
						<navigator hover-class="none" url="/pages/info/withdraw" class="flex withdraw" v-if="isEnable">
							<view>立即提现</view>
							<image src="../../static/info/rightArrows.png" class="rightArrows"></image>
						</navigator>
					</view>
				</view>
			</view>
			<view class="flex center earningsList">
				<view>收益记录</view>
				<!-- <view class="flex center timePick">
					<view>日期选择</view>
					<image src="../../static/index/ashArrows.png" class="ashArrows"></image>
				</view> -->
			</view>
			<view>
				<view class="flex messageList" v-for="(item,index) in list" :key="index">
					<image
						:src="item.modifyPoint>0?'../../static/info/withDown.png':'../../static/index/withdrawBlue.png'"
						class="withdrawIcon"></image>
					<view class="flex content">
						<view class="flex center withdrawNum">
							<view>{{item.modifyMsg}}</view>
							<view><text>{{item.modifyPoint>0?'+':''}}</text>{{item.modifyPoint}}
							</view>
						</view>
						<view class="flex center balance">
							<view>余额：{{item.nowPoint}} </view>
							<view>{{item.createTime}}</view>
						</view>
						<view class="flex center balance" v-if="item.modifyMsg=='积分提现驳回归还'"> 驳回原因：{{item.returnReason}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import NavBar from "../../components/NavBar.vue"
	import {
		myIncomeId,
		myIncomePage,
		enableRZ
	} from '../../common/api.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				title: '我的收益',
				pageNo: 1,
				list: [],
				userInfo: {},
				tookIncome: 0, //已提现收益
				todayPoint: 0, //今天收益积分
				awaitPoint: 0, //我的积分
				awaitMoney: 0,
				isEnable: true
			}
		},
		onShow() {
			this.getEnableRZ();
			// #ifdef MP-WEIXIN
			this.userInfo = uni.getStorageSync('userInfo')
			// #endif
			this.pageNo = 1
			this.myIncomeId()
			this.myIncomePage()
		},
		onReachBottom() {
			this.pageNo++
			this.myIncomePage()
		},
		methods: {
			getEnableRZ() {
				enableRZ().then(res => {
					if (res.code == 200) {
						this.isEnable = res.result;
					}
				})
			},
			myIncomeId() {
				myIncomeId(this.userInfo.id).then(res => {
					this.todayPoint = res.result.todayPoint
					this.tookIncome = res.result.tookIncome
					this.awaitPoint = res.result.awaitPoint
					this.awaitMoney = res.result.awaitMoney
				})
			},
			myIncomePage() {
				myIncomePage({
					id: this.userInfo.id,
					pageNo: this.pageNo
				}).then(res => {
					this.list = this.pageNo == 1 ? res.result.records : this.list.concat(res.result.records)
				})
			},
			handRight() {}
		}
	}
</script>
<style scoped>
	.balance {
		color: #999999;
		font-size: 24rpx;
		font-weight: 400;
		justify-content: space-between;
	}

	.withdrawNum {
		justify-content: space-between;
		font-weight: 700;
		font-size: 32rpx;
		margin: 18rpx 8rpx;
	}

	.content {
		flex: 1;
		flex-direction: column;
		padding-right: 46rpx;
	}

	.withdrawIcon {
		width: 74rpx;
		height: 62rpx;
		margin: 34rpx 34rpx 32rpx 22rpx;
	}

	.messageList {
		width: 686rpx;
		/* height: 128rpx; */
		padding: 18rpx 0;
		box-sizing: border-box;
		border-radius: 24rpx;
		opacity: 1;
		background: #ffffff;
		margin: 36rpx;
	}

	.timePick {
		width: 184rpx;
		height: 48rpx;
		border-radius: 250rpx;
		background: #eeeeee;
		color: #9e9e9e;
		font-size: 24rpx;
		font-weight: 500;
		align-items: center;
		justify-content: space-around;
	}

	.earningsList {
		padding: 0 38rpx;
		justify-content: space-between;
		color: #333333;
		font-size: 32rpx;
		font-weight: 700;
		width: 678rpx;
	}

	.ashArrows {
		width: 30rpx;
		height: 22rpx;
	}

	.earningsBox {
		margin-top: 30rpx;
		padding-right: 188rpx;
		justify-content: space-between;
	}

	.withdrawText {
		justify-content: space-between;
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
		margin-bottom: 18rpx;
	}

	.look {
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}

	.safety {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.withdraw {
		position: absolute;
		top: 198rpx;
		right: 8rpx;
		width: 176rpx;
		height: 72rpx;
		border-radius: 12rpx;
		background: #ffffff99;
		color: #333333;
		font-size: 26rpx;
		font-weight: 500;
		align-items: center;
		justify-content: center;
	}

	.rightArrows {
		width: 32rpx;
		height: 32rpx;
		margin: 5rpx 0 0 10rpx;
	}

	.withdrawBj {
		width: 686rpx;
		height: 310rpx;
	}

	.withdrawContent {
		width: 590rpx;
		height: 226rpx;
		position: absolute;
		top: 0;
		right: 0;
		padding: 42rpx 48rpx;
		color: #333333;
		font-size: 24rpx;
		font-weight: 500;
	}

	.withdrawBox {
		width: 686rpx;
		height: 310rpx;
		margin: 220rpx 32rpx 48rpx;
		position: relative;
	}

	.container {
		position: absolute;
		top: 0;
		left: 0;
	}

	.earningBj {
		width: 100%;
	}
</style>
<style>
	page {
		background: #f7f7f7;
	}
</style>